<template>
  <div class="yxp-course">
    <TopBack :title="title" :courseId="id" :course_type="course_type" type="8"/>
    <div class="yxp-composition-main">
      <div class="composition-list">
        <div class="composition-list-item" v-for="item in dataList" :key="item.id" @click="handleDetail(item.id)">
          <div class="composition-list-item-box">
            <img src="@/assets/composition/time-icon.png" class="time-icon"/>
            <div class="list-item-r">
                <h3>{{item.title}}</h3>
                <p>{{item.add_time}}</p>
            </div>
          </div>
        </div>
      </div>
      <Empty v-if="isNone" />
    </div>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import TopBack from '../components/TopBack.vue'
import Empty from '@/components/Empty.vue'
import Timetips from '@/components/Timetips.vue'
import { reportList } from '@/services/composition.js'
export default {
  name: 'list',
  components: {
    TopBack,
    Empty,
    Timetips
  },
  data () {
    return {
      title: '训练记录',
      id: '',
      course_type: 0,
      dataList: [],
      isNone: false
    }
  },
  mounted() {
     window.onresize = () => {

        console.log('clientWidth----',document.body.clientWidth)
     };
  },
  created () {
    if (this.$route.query.id) {
      this.id = +this.$route.query.id
      this.course_type = +this.$route.query.course_type
    }
    // let dataList = {
    //   "status": "success",
    //   "code": 1,
    //   "data":{
    //      "total": 1,
    //      "list": [
    //         {
    //           "id": 6,
    //           "add_time": '2020-04-14 12:00:00',
    //           "title":'初中-第一单元-范文一 • 第1遍',
    //           "score": 67
    //         },
    //         {
    //           "id": 7,
    //           "add_time": '2020-04-14 12:00:00',
    //           "title":'初中-第er单元-范文一 • 第2遍',
    //           "score": 68
    //         }
    //     ]
    //   }
    // }
    // this.dataList = dataList.data.list
    this.handleData()
  },
  methods: {
    async handleData () {
      this.$loading.show()
      let data = await reportList({ curr_id: this.id })
      if (data.code === 1) {
        this.$loading.hide()
        if (data.data.list.length === 0) {
          this.isNone = true
          return
        }
        this.dataList = data.data.list
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    handleDetail (id) {
      let query = {
         id: id,
         courseId: this.id,
         course_type: this.course_type
       }
       console.log(query)

     this.$router.push({
       path: '/composition/uploadResult',
       query: {
         id: id,
         courseId: this.id,
         course_type: this.course_type,
         modal: 1
       }
     })
    }
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
}
</script>
<style lang='less' scope>
.yxp-composition-main {
  // position: relative;
  // height: 100%;
  // overflow: auto;
  // padding-top: 110px;
  .composition-box {
    justify-content: center;
  }
  .composition-list {
    display: flex;
    justify-content: space-between;

    &-item {
      // width: 750px;
      background: #fff;
      border-radius: 10px;
      margin-bottom: 20px;
      padding: 30px 40px 28px;
      cursor: pointer;
      transition: box-shadow .3s;
      &:hover {
        box-shadow:0px 0px 10px rgba(39,191,163,0.5);
      }
      &-box {
        display: flex;
        align-items: center;
        text-align: left;
        .time-icon {
          width: 30px;
          height: 30px;
          margin-right: 20px;
        }
        .list-item-r {
          flex: 1;
          h3 {
            font-size:24px;
            font-family:Microsoft YaHei;
            font-weight:400;
            color: #333;
          }
          p {
            font-size:16px;
            font-family:Microsoft YaHei;
            font-weight:400;
            color: #333;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>
